PostCSS in Action

PostCSS Не только трансформирует

Например, stylelint:

#bad-selector {
  background: red;
}

Unexpected id selector (selector-no-id) [stylelint]

PostCSS Не только расширение CSS

$background-color: red;

body {
  background: $background-color;
}

PostCSS и препроцессоры Поддержка

PostCSS и препроцессоры Производительность

PostCSS уже здесь Количество загрузок

Интеграция Ручной вызов

import postcss from 'postcss';

postcss([ plugin1, plugin2 ])
  .process(css)
  .then( result => console.log(result.css) );

Интеграция Интеграция с Gulp

gulp.task('css', () => {
  return gulp.src('./components/**/*.css')
    .pipe(postcss([
      autoprefixer({ browsers: [ 'last 2 versions' ] }),
      cssnano
    ])
    .pipe(gulp.dest('./dest'));
});

Интеграция postcss-use

@use postcss-circle;

.circle {
  circle: 100px red;
}

Внедрение в проект Проект без PostCSS

.pipe(less())
.pipe(postcss([
  require('autoprefixer-core'),
  require('cssnext'),
  require('cssnano')
])

Внедрение в проект Новый проект

.pipe(postcss([
  require('precss'),
  require('autoprefixer-core'),
  require('cssnano')
])

Переменные postcss-simple-vars

@import 'config/icons.css';

.icon {
  &_small  { size: $icon-s-size; }
  &_medium { size: $icon-m-size; }
  &_large  { size: $icon-l-size; }
}

Переменные Конфигурация в JavaScript

import sizes from 'config/icons';

export default simpleVars({
  'icon-s-size': toPx(sizes.small),
  'icon-m-size': toPx(sizes.medium),
  'icon-l-size': toPx(sizes.large)
});

Переменные Миксины и плагины

import step from 'config/step';

postcss.plugin('postcss-default-step', () => {
  /* реализация плагина */
});

Переменные Клиентский код

import screen from 'config/screen';

const DesktopOnlyMixin = {
  /* реализация миксина для React */
};

Миксины Реализация как функции

require('postcss-mixins')({
  mixins: {
    mixinName (mixinAST, ...mixinArgs) {
      /* реализация миксина */
    }
  }
});

Миксины Миксины в PostCSS

Кастомные свойства     →     Миксины     →     Плагины

.example {
  size: 10px 20px;     /* Кастомное свойство */
  @mixin icon twitter; /* Миксин */
  clear: fix;          /* Плагин */
}

Скажем каскаду «Нет!» postcss-bem-linter

/* @define Button */

.Button             { }
.Button--large      { }
.Button-icon        { }
.Button.is-disabled { }

Скажем каскаду «Нет!» CSS Modules

.className {
  color: green;
}

import styles from './style.css';

return `<div class="${ styles.className }">`;

Зависимости postcss-url

.icon    { background: url(small-image.png); }
.backing { background: url(large-image.png); }

.icon    { background: url(data:image/png;base64,...); }
.backing { background: url(/assets/large-image.png); }

Зависимости webpcss

.icon { background-image: url(images/icon.png); }

.icon       { background-image: url(images/icon.png); }
.webp .icon { background-image: url(images/icon.webp); }